<template>
  <div>
    <!--  -->
    <ZTableExpand :data="data">
      <ZTableItem label="姓名" prop="name" v-slot="scoped">
        <!-- {{ scoped }} -->
        <ElInput></ElInput>
      </ZTableItem>
      <ZTableItem label="年龄" prop="age" v-slot="scoped">
        <!-- {{ scoped }} -->
        <ElInput></ElInput>
      </ZTableItem>

      <!-- option buttons -->
      <template #options>
        <el-button>add-item</el-button>
        <el-button>delete</el-button>
        <el-button>copy</el-button>
        <el-button>edit</el-button>
        <el-button>save</el-button>
        <el-button>审批</el-button>
      </template>
    </ZTableExpand>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { ElInput } from 'element-plus';
import {
  ZTableExpand,
  // ZTableExtra,
  ZTableItem,
} from '@/components/ZTable';

// const data = [
//   { name: 'zhangsan', age: 18 },
//   { name: 'lisi', age: 35 },
// ];

const data = ref([
  { name: 'zhangsan', age: 18 },
  { name: 'lisi', age: 35 },
]);

setTimeout(() => {
  data.value.push({ name: '王五', age: 18 });
}, 3000);
</script>

<style scoped></style>
